<template>
    <el-breadcrumb separator="/" class="breadcrumb">
      <transition-group name="breadcrumb">
        <el-breadcrumb-item v-for="(item, index) in titleList" :key="item.path">
          <span v-if="index == titleList.length-1" class="text">{{ item.meta.title }}</span>
          <a v-else @click.prevent="handleRouteLink(item)" class="link">{{ item.meta.title }}</a>
        </el-breadcrumb-item>
      </transition-group>
    </el-breadcrumb>
</template>

<script>
    export default {
      name: "index",
      data() {
        return {
          titleList: null
        }
      },
      methods: {
        getBreakCrumb() {
          let matched = this.$route.matched.filter(item => item.meta.title)
          const first = matched[0]
          if(first && first.name.trim().toLocaleLowerCase() !== 'Index'.toLocaleLowerCase()) {
            matched = [{ path: '', redirect: '/index', meta: {title: '主页'} }].concat(matched)
          }
          this.titleList = matched.filter(item => item.meta && item.meta.title)
        },
        //点击修改路由路径
        handleRouteLink(item) {
          console.log(item)
          const { redirect, path } = item
          if(redirect) {
            this.$router.push(redirect)
            return
          }
          this.$router.push(path)
        }
      },
      watch: {
        $route() {
          this.getBreakCrumb()
        }
      },
      created() {
        this.getBreakCrumb()
      }

    }
</script>

<style lang="scss" scoped>
  .breadcrumb {
    display: inline-block;
    font-size: 14px;
    height: 50px;
    line-height: 50px;
    padding: 0 10px;
    .link {
      font-weight: 500;
      color: #000;
    }
    .link:hover {
      color: #409EFF;
    }
  }
  .breadcrumb-enter,
  .breadcrumb-leave-to {
    opacity: 0;
    transform: translateX(20px);
  }
  .breadcrumb-enter-active,
  .breadcrumb-leave-active {
    transition: all 0.6s ease;
  }
  .breadcrumb-move {
    transition: all 0.6s ease;
  }
  .breadcrumb-leave-active {
    position: absolute;
  }
</style>
